<template>
  <div class="container">
    <n-form
      ref="formRef"
      :label-width="80"
      :model="formValue"
      :rules="rules"
      :size="small"
      label-placement="left"
      label-width="auto"
      label-align="left"
    >
      <div class="head">
        <div class="head-left">
          <div class="img">
            <img src="../../../assets/imgs/resume/avatar.jpg" alt="" />
          </div>
          <div class="name">
            <n-form-item label="姓 名 :" path="user.name" size="small">
              <n-input
                v-model:value="formValue.user.name"
                placeholder="输入姓名"
              />
            </n-form-item>
          </div>
        </div>
        <div class="head-right">
          <div class="age">
            <n-form-item label="年 龄 :" path="user.age" size="small">
              <n-input
                v-model:value="formValue.user.age"
                placeholder="输入年龄"
              />
            </n-form-item>
          </div>
          <div class="phone">
            <n-form-item label="电 话 :" path="user.phone" size="small">
              <n-input
                v-model:value="formValue.user.phone"
                placeholder="电话号码"
              />
            </n-form-item>
          </div>
          <div class="mail">
            <n-form-item label="邮 箱 :" path="user.mail" size="small">
              <n-input
                v-model:value="formValue.user.email"
                placeholder="邮箱"
              />
            </n-form-item>
          </div>
        </div>
      </div>
      <div class="dividingLine"></div>
      <div class="content">
        <div class="verticalBar">
          <img src="../../../assets/imgs/resume/verticalBar.png" alt="" />
        </div>

        <div class="content-right">
          <div class="content-right-item">
            <div class="content-right-item-title">
              <div>教育经历</div>
              <div>EDUCATIONAL</div>
              <div>EXPERIENCE</div>
            </div>

            <div class="content-right-item-input">
              <n-form-item path="user.education">
                <n-input
                  v-model:value="formValue.user.educational_experience"
                  type="textarea"
                  placeholder="教育经历"
                />
              </n-form-item>
            </div>
          </div>

          <div class="content-right-item">
            <div class="content-right-item-title">
              <div>专业技能</div>
              <div>PROFESSIONAL</div>
              <div>SKILL</div>
            </div>
            <div class="content-right-item-input">
              <n-form-item path="user.professionalAbility">
                <n-input
                  v-model:value="formValue.user.skill"
                  type="textarea"
                  placeholder="专业技能"
                />
              </n-form-item>
            </div>
          </div>

          <div class="content-right-item">
            <div class="content-right-item-title">
              <div>项目经历</div>
              <div>PROJECT</div>
              <div>EXPERIENCE</div>
            </div>
            <div class="content-right-item-input">
              <n-form-item size="small" path="user.projectExperience">
                <n-input
                  v-model:value="formValue.user.project_experience"
                  type="textarea"
                  placeholder="项目经历"
                />
              </n-form-item>
            </div>
          </div>

          <div class="content-right-item">
            <div class="content-right-item-title">
              <div>职位薪水</div>
              <div>JOB</div>
              <div>SALARY</div>
            </div>
            <div class="content-right-item-input">
              <n-form-item size="small" path="user.positionSalary">
                <n-input
                  v-model:value="formValue.user.dream_position"
                  type="textarea"
                  placeholder="职位"
                />
              </n-form-item>
            </div>
            <div class="content-right-item-input">
              <n-form-item size="small" path="user.positionSalary">
                <n-input
                  v-model:value="formValue.user.dream_salary"
                  type="textarea"
                  placeholder="薪水"
                />
              </n-form-item>
            </div>
          </div>

          <div class="content-right-item">
            <div class="content-right-item-title">
              <div>自我评价</div>
              <div>SELF</div>
              <div>EVALUATION</div>
            </div>
            <div class="content-right-item-input">
              <n-form-item size="small" path="user.personalSummary">
                <n-input
                  v-model:value="formValue.user.self_evaluation"
                  type="textarea"
                  placeholder="自我评价"
                />
              </n-form-item>
            </div>
          </div>
        </div>
      </div>
    </n-form>
    <div class="btn">
      <n-button type="primary" @click="generateResume"> 生成简历 </n-button>
    </div>
  </div>
</template>

<script>
//引入接口
import {
  getStudentInfo,
  getStudentPicture,
  editStudentInfo,
} from "@/http/api/student"
export default {
  data() {
    return {
      index: "",
      formValue: {
        user: {
          id: "",
          name: "",
          age: "",
          phone: "",
          email: "",
          educational_experience: "",
          dream_position: "",
          project_experience: "",
          dream_salary: "",
          self_evaluation: "",
          skill: "",
        },
      },
    }
  },
  methods: {
    generateResume() {
      this.editInfo()
      window.$message.success("编辑成功")
      this.$router.push({
        path: "/resume-guidance/resume-preview-three",
      })
    },
    getInfo() {
      getStudentInfo()
        .then((result) => {
          // console.log(result.result[0])
          this.formValue.user = result.result[0]
        })
        .catch((err) => {
          console.log(err)
        })
    },
    editInfo() {
      editStudentInfo(this.formValue.user)
        .then((result) => {
          console.log(result)
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  mounted() {
    this.index = this.$route.params.index
    this.getInfo()
  },
}
</script>

<style lang="scss" scoped>
.container {
  .dividingLine {
    background-color: black;
    width: 100%;
    height: 20px;
    margin: 10px 0px;
  }

  width: 80%;
  margin: 0 auto;
  .head {
    display: flex;
    justify-content: space-between;
    height: 200px;
    .head-left {
      display: flex;
      align-items: center;
      width: 50%;

      .name {
        ::v-deep .n-form-item .n-input {
          margin-left: -32px;
          width: 220px;
        }
      }

      .img img {
        width: 100px;
        height: 120px;
      }
    }
    .head-right {
      ::v-deep .n-form-item .n-input {
        margin-left: -32px;
        width: 220px;
      }

      width: 50%;
    }
  }
  .content {
    display: flex;
    .verticalBar {
      flex: 0 0 2px;
    }
    .content-right {
      flex: 1;
      .content-right-item {
        color: #5b5014;
        display: flex;
        width: 100%;
        height: 120px;
        .content-right-item-title {
          height: 80px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          flex: 0 0 120px;
        }
        .content-right-item-input {
          flex: 1;
        }
      }
    }
  }
  .btn {
    display: flex;
    justify-content: space-around;
  }
}
</style>
